// http://ionicframework.com/docs/theming/
@import "../../node_modules/flex.css/dist/data-flex";
@import "../../node_modules/dx-iconfont/iconfont";

// App Global Sass
// --------------------------------------------------
// Put style rules here that you want to apply globally. These
// styles are for the entire app and not just one component.
// Additionally, this file can be also used as an entry point
// to import other Sass files to be included in the output CSS.
//
// Shared Sass variables, which can be used to adjust Ionic's
// default Sass variables, belong in "theme/variables.scss".
//
// To declare rules for a specific mode, create a child rule
// for the .md, .ios, or .wp mode classes. The mode class is
// automatically applied to the <body> element in the app.

// 头部公共样式
ion-header{
  .back-button{
    color: rgb(245, 247, 253);
  }

  ion-navbar.toolbar-ios{
    >div.toolbar-background-ios{
      background: rgb(23, 126, 185);
      border-width: 0 !important;
    }
    button{
      .button-inner{
        .back-button-icon-ios{
          font-size: 2.4rem;
        }
      }
    }
    .toolbar-content{
      .title{
        .toolbar-title{
          color: #e4e6ec;
          span{
            font-family: PingFangSC-Medium;
            font-size: 20px;
          }
        }
      }
    }

  }
}

ion-toggle.toggle-ios.define-toggle{
  width: 90px;
  &.toggle-checked{
    .toggle-icon{
      background-image: linear-gradient(223deg, #648EF3 0%, #75C3F2 100%);
      .toggle-inner{
        top: 1px;
      }
    }
  }
  .toggle-icon{
    .toggle-inner{
      width: 50px;
      left: 20px;
      top: 0;
      height: 30px;
      -webkit-box-shadow: none;
      box-shadow: none;
      &:after{
        content: "当日";
        color: #777777;
        font-size: 14px;
        position: relative;
        top: 2px;
      }
    }
  }
  .item-cover-ios{
    .button-inner{
      &:after{
        content: "当年";
        color: white;
        left: -22px;
        font-size: 14px;
        position: relative;
      }
    }
  }
}
ion-toggle.toggle-ios.define-toggle[ng-reflect-model='false']{
  width: 90px;
  .toggle-icon{
    border: 1px solid #E9E9E9;
    background: none;
    .toggle-inner{
      width: 50px;
      left: 0;
      -webkit-box-shadow: none;
      box-shadow: none;
      background-image: linear-gradient(-223deg, #75C3F2 0%, #648EF3 100%);
      border-radius: 100px;
      &:after{
        content: "当日";
        color: white;
        font-size: 14px;
      }
    }
  }
  .item-cover-ios{
    .button-inner{
      &:after{
        content: "当年";
        color: #777777;
        left: 24px;
        font-size: 14px;
        position: relative;
      }
    }

  }

}

.picker-ios {
  .picker-wrapper{
    border-top: 0;
  }
  .picker-toolbar{
    border-bottom: 0;
      .picker-toolbar-button{
          text-align: center;
          background: #42C6F6;
          .picker-button,.picker-button.activated{
              color:#fff;
              width: 100%;
          }
      }
      .picker-toolbar-cancel{
          background: #fff;
          .picker-button,.picker-button.activated{
              color:#000;
              width: 100%;
          }
      }
  }
  .picker-below-highlight,.picker-above-highlight{
      border: 0;
  }
}
// 列表为空时公共样式
ion-content{
  .empty{
    margin-top: 30%;
    text-align: center;
    .icon-kong{
      font-size: 8rem;
      color: #E7E9F0;
    }
    .tip{
      margin-top: 1rem;
      font-family: PingFangSC-Light;
      font-size: 20px;
      color: #2A344E;
      letter-spacing: 0;
    }
  }
}

// alert 公共样式
//ion-alert clear default
ion-alert.tip-alter{
  .alert-wrapper{
    border-radius: 0;
  }
  .alert-message{
    >div{
      font-size: 1.6rem;
    }
  }
  .alert-button-group{
    .tip-button-alter{
      background: #42C6F6;
      color: white;
      font-weight: normal;
    }
    .alert-button{
      .button-inner{
        font-weight: normal;
      }
    }
  }
}

/*
clearfix
 */
.clearfix{
  clear: both;
}


.scroll-content{
  padding: 5px;
}

//自定义toast样式
.custToast{
  // background-color: rgb(179, 223, 97);
  opacity: 0.7;
}
